<template>
    <orh-trees>
        <Tree :data="trees" slot="trees" @on-select-change="clicktreemenu"></Tree>
        <current-term @on-formstate="formState" style="width:200px" slot="option"></current-term>
        <Button type="primary" slot="option" style="margin-left: 10px;" :loading="butloading" @click="exportAll"
                v-button="'leaveclass_export'" size="small">导出请假分类统计
        </Button>
        <Button type="primary" slot="option" style="margin-left: 10px;" @click="exportSameDay"
                v-button="'leaveclassame_export'" size="small">选择导出数据
        </Button>
        <Modal v-model="lookupState" slot="others">
            <p slot="header"><span>请选择时间段</span></p>
            <div style="text-align:center">
                <DatePicker type="daterange" v-if="lookupState" @on-change="seltime" placeholder="选择时间段"
                            style="width: 200px"></DatePicker>
            </div>
            <div slot="footer">
                <Button type="primary" :loading="timeloading" @click="lookupSubmit">确定</Button>
                <Button @click="lookupState=false">取消</Button>
            </div>
        </Modal>
        <orh-sub-table slot="content">
            <div slot="table">
                <Card>
                    <Row>
                        <i-col span="6"><h4>总概率：{{percents}}</h4></i-col>
                        <i-col span="18"><h4>请假总人数：{{total}}人</h4></i-col>
                    </Row>
                </Card>
                <div>
                    <echarts :option="option" v-if="HonorList.length!=0" style="width100%;height:420px;"></echarts>
                    <Spin size="large" fix v-if="spinShowHel"></Spin>
                </div>
                <Table :columns="columns1" :data="classList" :loading="spinShowHel"></Table>
                <Modal v-model="modal2" width="900">
                    <p slot="header" style="color:#f60;text-align:center"><span>{{title}}</span></p>
                    <div style="text-align:center">
                        <Table :columns="columnsxq" :loading="tableloadxq" :data="GradeListxq"></Table>
                    </div>
                    <div slot="footer">
                        <Button type="primary" size="large" long @click="del">关闭</Button>
                    </div>
                </Modal>
            </div>
        </orh-sub-table>
    </orh-trees>
</template>
<script>
    export default {
        layout: "menu",
        components: {
            CurrentTerm: resolve => require(['&/Authpub/CurrentTerm.vue'], resolve),
            Echarts: () => import("&/Public/Echarts").then(m => m.default || m)
        },
        name: 'leave-leaveclassifiedstatistics',
        data() {
            return {
                start_time: '',
                end_time: '',
                timeloading: false,
                lookupState: false,
                butloading: false,
                allid: null,
                percents: null,
                modal2: false,
                tableloadxq: false,
                GradeListxq: [],
                classList: [],
                title: null,
                total: null,
                show: false,
                trees: [],
                treesHead: {
                    title: "职务列表",
                    button: false,
                    button_text: "添加按钮"
                },
                HonorList: [],
                teacher_leave_kind_id: null,
                spinShowHel: false,
                url: 'api/leave/v1/leave_statistics/teacher_leave_statistics?teacher_leave_kind=',
                columnsxq: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '请假种类',
                        align: 'center',
                        width: 90,
                        render: (h, params) => {
                            if (params.row.leave_kind != null) {
                                let ss = params.row.leave_kind.dictionary_name.zh ? params.row.leave_kind.dictionary_name.zh : params.row.leave_kind.dictionary_name.mn
                                return h('div', ss);
                            }
                        }
                    },
                    {
                        title: '请假开始时间',
                        align: 'center',
                        key: 'start_time',
                        width: 170,
                    },
                    {
                        title: '请假结束时间',
                        align: 'center',
                        key: 'end_time',
                        width: 170,
                    },
                    {
                        title: '请假天数',
                        align: 'center',
                        key: 'leave_days',
                        width: 90,
                    },
                    {
                        title: '是否调课',
                        align: 'center',
                        width: 90,
                        render: (h, params) => {
                            return h('div', [
                                h('div', params.row.whether_class == '1' ? '是' : '否')
                            ]);
                        }
                    },
                    {
                        title: '请假原因',
                        align: 'center',
                        render: (h, params) => {
                            let name = params.row.teacher_leave_reason.zh ? params.row.teacher_leave_reason.zh : params.row.teacher_leave_reason.zh;
                            return h('div', name)
                        }
                    },
                ],
                option: {
                    color: ['#1c2438', '#495060'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['请假数量', '请假天数',]
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar',]},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            show: false,
                            axisTick: {show: false},
                            data: []
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '请假数量',
                            type: 'bar',
                            barGap: 0,
                            data: []
                        },
                        {
                            name: '请假天数',
                            type: 'bar',
                            barGap: 0,
                            data: []
                        },
                    ]
                },
                columns1: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '教师姓名',
                        width: 120,
                        render: (h, params) => {
                            let teacher_name = params.row.teacher_name.zh ? params.row.teacher_name.zh : params.row.teacher_name.mn
                            return h('div', teacher_name)
                        }
                    },
                    {
                        title: '请假数量',
                        key: 'leave_count',
                        sortable: true,
                        sortType: 'desc'
                    },
                    {
                        title: '请假天数',
                        key: 'leave_day',
                        sortable: true,
                        sortType: 'desc'
                    },
                    {
                        title: '扣分数',
                        key: 'points',
                    },
                    {
                        title: ' ',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.look(params.row)
                                        }
                                    }
                                }, '查看'),
                            ]);
                        }
                    },
                ],
            };
        },
        methods: {
            /************************************************************
             * 选择学期
             ************************************************************/
            formState(val) {
                if (val != null) {
                    this.allid = val
                    this.url = `api/leave/v1/leave_statistics/teacher_leave_statistics?semester_id=${val}&teacher_leave_kind=`
                    this.queryData(this.teacher_leave_kind_id)
                }
            },
            /************************************************************
             * 获取部门
             ************************************************************/
            getAllDepart() {
                this.$http.get('api/dictionary/v1/dictionary/pidquerys?teacher_leave_kind').then(res => {
                    this.trees = this.process(res.data.teacher_leave_kind)
                    this.clicktreemenu(this.trees)
                }).catch(err => {
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                })
            },
            /************************************************************
             * 处理数据
             ************************************************************/
            process(data) {
                let arr = []
                data.forEach(item => {
                    item.title = item.dictionary_name.zh ? item.dictionary_name.zh : item.dictionary_name.mn;
                    item.id = item.dictionary_id;
                    arr.push(item)
                });
                return arr
            },
            /************************************************************
             * 点击请假分类
             ************************************************************/
            clicktreemenu(val) {
                this.queryData(val[0].id)
                this.teacher_leave_kind_id = val[0].id
            },
            /************************************************************
             * 查看
             ************************************************************/
            look(row) {
                if (this.teacher_leave_kind_id != null) {
                    this.title = row.teacher_name.zh ? row.teacher_name.zh : row.teacher_name.mn
                    this.modal2 = true;
                    this.tableloadxq = true
                    this.$http.get(`api/leave/v1/leave_statistics/user_details/${row.user_id}?semester_id=${this.allid}&teacher_leave_kind=${this.teacher_leave_kind_id}`).then((response) => {
                        this.tableloadxq = false
                        this.GradeListxq = response.data
                    });
                }
            },
            /************************************************************
             * 关闭查看
             ************************************************************/
            del() {
                setTimeout(() => {
                    this.modal2 = false;
                }, 500);
            },
            /************************************************************
             * 获取请假分类统计
             ************************************************************/
            queryData(id) {
                this.HonorList = []
                if (id != null) {
                    this.spinShowHel = true
                    this.$http.get(`${this.url}${id}`).then(val => {
                        console.log(val)
                        let sum = 0;
                        let xAxis = []
                        let yAxis1 = []
                        let yAxis2 = []
                        if (val.data.length != 0) {
                            this.classList = val.data;
                            this.HonorList = val.data;
                            this.HonorList.forEach((item, index) => {
                                sum += item.Percentage
                                xAxis.push(item.teacher_name.zh)
                                yAxis1.push(item.leave_count)
                                yAxis2.push(item.leave_day)
                            })
                            let {length} = this.HonorList.filter(item => item.leave_count != 0)
                            this.total = length
                            let s = sum.toFixed(2)
                            this.percents = `${s}%`
                        } else {
                            this.HonorList = []
                            this.total = 0
                            this.percents = '0%'
                        }
                        this.option.xAxis[0].data = xAxis
                        this.option.series[0].data = yAxis1
                        this.option.series[1].data = yAxis2
                        this.spinShowHel = false
                    }).catch(err => {
                        if (err.code && err.code == 422) {
                            this.$Message.error(err.message);
                        }
                        this.spinShowHel = false
                    })
                }
            },
            /************************************************************
             * 时间处理
             ************************************************************/
            seltime(val) {
                this.start_time = val[0]
                this.end_time = val[1]
            },
            /************************************************************
             * 选择时间段导出数据
             ************************************************************/
            lookupSubmit() {
                this.lookupState = false
                this.publicexport()
            },
            /************************************************************
             * 导出
             ************************************************************/
            exportAll() {
                if (this.allid != null) {
                    if (this.teacher_leave_kind_id != null) {
                        this.butloading = true
                        this.$http.post(`api/leave/v1/leave_statistics/leave_kind_out?semester_id=${this.allid}&teacher_leave_kind=${this.teacher_leave_kind_id}`).then(val => {
                            this.butloading = false
                            window.open(val.data.url)
                        }).catch(err => {
                        })
                    } else {
                        this.$Message.info('请选择请假分类！');
                    }
                } else {
                    this.$Message.info('请选择学期！');
                }
            },
            /************************************************************
             * 选择导出数据
             ************************************************************/
            exportSameDay() {
                if (this.allid != null) {
                    if (this.teacher_leave_kind_id != null) {
                        this.lookupState = true
                        this.publicexport()
                    } else {
                        this.$Message.info('请选择请假分类！');
                    }
                } else {
                    this.$Message.info('请选择学期');
                }
            },
            /************************************************************
             * 选择导出数据的公共方法
             ************************************************************/
            publicexport() {
                if (this.start_time != '' && this.end_time != '') {
                    this.timeloading = true
                    this.$http.post(`api/leave/v1/leave_statistics/leave_kind_out?semester_id=${this.allid}&teacher_leave_kind=${this.teacher_leave_kind_id}&start_time=${this.start_time}&end_time=${this.end_time}`).then(val => {
                        window.open(val.data.url)
                        this.start_time = ''
                        this.end_time = ''
                        this.timeloading = false
                    }).catch(err => {
                        this.timeloading = false
                    })
                }
            }
        },
        created() {
            this.getAllDepart()
        },
    }
</script>
